+52 1 55 4536 7879(Tú)
Envía mensajes a este mismo número.
HOY
4:58 p.m.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tennis Express</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #2e8b57;
padding: 20px;
text-align: center;
color: white;
position: relative;
}
header h1 {
font-size: 36px;
margin: 0;
}
header img {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
left: 20px;
}
.container {
max-width: 1200px;
margin: auto;
padding: 20px;
}
.carousel {
display: flex;
overflow: hidden;
width: 100%;
position: relative;
margin-bottom: 40px;
}
.carousel img {
width: 60%; /* Reducción del 40% en el tamaño de las imágenes */
height: auto;
margin: 0 auto; /* Centra las imágenes en el contenedor */
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
padding: 10px;
text-align: center;
}
.carousel-item h3 {
margin: 10px 0;
font-size: 24px;
}
.carousel-item p {
font-size: 18px;
color: #555;
}
.carousel-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
}
.carousel-control {
background-color: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>TennisExpress.mx</h1>
<img src="https://example.com/tenista-logo.png" alt="Logo de Tenista">
</header>
<section class="container">
<h2>TENISEXPRESS - Artículos de Tenis de Alta Calidad</h2>
<!-- Carrusel de Raquetas -->
<h3>Raquetas de Tenis</h3>
<div class="carousel" id="raquetas-carousel">
<div class="carousel-track">
<div class="carousel-item">
<img src="imegenes/2d2420e3-65e3-484e-9e5d-254f41447b4d.jpg" alt="Raqueta 1">
<h3>Raqueta Pro</h3>
<p>$120.00</p>
</div>
<div class="carousel-item">
<img src="https://example.com/raqueta2.jpg" alt="Raqueta 2">
<h3>Raqueta Avanzada</h3>
<p>$150.00</p>
</div>
<div class="carousel-item">
<img src="https://example.com/raqueta3.jpg" alt="Raqueta 3">
<h3>Raqueta Básica</h3>
<p>$90.00</p>
</div>
</div>
<div class="carousel-controls">
<button class="carousel-control" onclick="prevRaquetas()">❮</button>
<button class="carousel-control" onclick="nextRaquetas()">❯</button>
</div>
</div>
<!-- Carrusel de Tenis -->
<h3>Tenis para Jugar</h3>
<div class="carousel" id="tenis-carousel">
<div class="carousel-track">
<div class="carousel-item">
<img src="imegenes/b63e6efd-a009-477b-9607-a2f57bccdc52.jpg" alt="Tenis 1">
<h3>Tenis Deportivo 1</h3>
<p>$85.00</p>
</div>
<div class="carousel-item">
<img src= "imegenes/3ca078ed-25bc-43c7-931a-f905b5f90e99.jpg" alt="Tenis 2">
<h3>Tenis Deportivo 2</h3>
<p>$95.00</p>
</div>
<div class="carousel-item">
<img src="https://example.com/tenis3.jpg" alt="Tenis 3">
<h3>Tenis Deportivo 3</h3>
<p>$75.00</p>
</div>
</div>
<div class="carousel-controls">
<button class="carousel-control" onclick="prevTenis()">❮</button>
<button class="carousel-control" onclick="nextTenis()">❯</button>
</div>
</div>
</section>
<footer>
<p>© 2024 TennisExpress.mx. Todos los derechos reservados.</p>
</footer>
<script>
let currentRaquetasIndex = 0;
let currentTenisIndex = 0;
function showRaquetas(index) {
const track = document.querySelector('#raquetas-carousel .carousel-track');
const items = document.querySelectorAll('#raquetas-carousel .carousel-item');
const totalItems = items.length;
currentRaquetasIndex = (index + totalItems) % totalItems;
track.style.transform =
translateX(-${currentRaquetasIndex * 100}%);
}
function prevRaquetas() {
showRaquetas(currentRaquetasIndex - 1);
}
function nextRaquetas() {
showRaquetas(currentRaquetasIndex + 1);
}
function showTenis(index) {
const track = document.querySelector('#tenis-carousel .carousel-track');
const items = document.querySelectorAll('#tenis-carousel .carousel-item');
const totalItems = items.length;
currentTenisIndex = (index + totalItems) % totalItems;
track.style.transform = translateX(-${currentTenisIndex * 100}%);
}
function prevTenis() {
showTenis(currentTenisIndex - 1);
}
function nextTenis() {
showTenis(currentTenisIndex + 1);
}
</script>
</body>
</html>5:04 p.m.5:04 p.m.
5:14 p.m.
5:14 p.m.
5:14 p.m.